<template>
  <div class="store-permission">
    <div class="search-content">
      <span class="fs16"></span>
      <el-input v-model="searchObj.store_name" placeholder="请输入经销商名称" clearable class="input w200"></el-input>
      <el-input v-model="searchObj.member_name" placeholder="请输入账号名称" clearable class="input w200"></el-input>
      <el-input v-model="searchObj.store_owner" placeholder="请输入公司名称" clearable class="input w200"></el-input>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="agentList" style="width:100%;">
      <el-table
        :data="aList"
        border
        style="width: 100%"
        ref="table"
        :height="oHeight"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <!-- <el-table-column type="index" width="50" label="序号"></el-table-column> -->
        <el-table-column fixed prop="store_id" label="店铺ID" key="store_id"></el-table-column>
        <el-table-column
          prop="first_depart_name"
          label="所属集团"
          key="first_depart_name"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="store_name"
          label="经销商名称"
          key="store_name"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="store_owner"
          label="公司名称"
          key="store_owner"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="member_id"
          label="账号id"
          key="member_id"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="member_name"
          label="账号名称"
          key="member_name"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <!-- <el-table-column fixed="right" align="center" label="操作" key="operate" width="160">
          <template slot-scope="scope">
            <el-button
              class="operateBtn"
              type="text"
              @click="jumpSetting(scope.row.store_id,scope.row.store_name)"
            >权限</el-button>
            <el-button class="operateBtn" type="text" @click="deleter(scope.row.store_id)">|删除</el-button>
            <el-button class="operateBtn" type="text" @click="edit(scope.row.store_id)">|编辑</el-button>
          </template>
        </el-table-column>-->
      </el-table>
      <pagination
        :arr="aList"
        :total="total"
        :currentPage="currentPage"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
      ></pagination>
    </div>
  </div>
</template>

<script>
import pagination from "@/components/pagination/pagination.vue";
import { resize } from "@/common/js/height.js";
export default {
  data() {
    return {
      searchObj: {
        //该变量定义查询传参
        pageSize: 10,
        page: 1,
        store_name: "",
        member_name: "",
        store_owner: ""
      },
      aList: [],
      oHeight: 800,
      total: 1,
      currentPage: 1
    };
  },
  components: {
    pagination
  },
  created() {},
  methods: {
    // 获取列表
    getList() {
      var that = this;
      this.searchObj.curpage = that.currentPage;
      this.$http
        .post(
          "/admin/auth/index.php?act=storesPermission&op=storesList",
          this.searchObj
        )
        .then(
          res => {
            if (res.code == 1) {
              this.aList = res.data.list;
              this.total = parseInt(res.data.totalCount);
            } else {
              this.$message.error("获取数据失败！");
              // alert(res.msg);
              this.aList = [];
            }
          },
          err => {
            this.$message.error("获取数据失败！");
          }
        );
    },
    // 搜索
    search() {
      //1、获取搜索的内容
      this.currentPage = 1;
      this.searchObj.page = 1;
      //2、获取内容列表
      this.getList();
    },
    // 重置
    reset() {
      //1、清空搜索的内容
      this.searchObj.store_name = "";
      this.searchObj.member_name = "";
      this.searchObj.store_owner = "";
      this.searchObj.page = 1;
      this.currentPage = 1;
      //2、获取内容列表
      this.getList();
    },
    // 跳转权限编辑
    jumpSetting(store_id, store_name) {
      this.$router.push({
        path: "/home/control-panel/power-setting",
        query: {
          id: store_id,
          name: store_name
        }
      });
    },
    // 删除店铺
    deleter(id) {
      this.$confirm("确认删除？")
        .then(_ => {
          this.$http
            .post("/admin/store/index.php?act=storeManage&op=delStore", {
              store_id: id
            })
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.reset();
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "error"
                });
              }
            );
          done();
        })
        .catch(_ => {});
    },
    // 点击编辑
    edit(id, name) {
      this.$router.push({
        path: "shop-edit",
        query: {
          id: id
        }
      });
    },
    // 改变当前页
    handleCurrentChange: function(val) {
      this.searchObj.page = val;
      this.currentPage = val;
      /*请求数据*/
      this.getList();
    },
    //分组一页多少数据
    handleSizeChange(val) {
      this.currentPage = 1;
      this.searchObj.page = 1;
      this.searchObj.pageSize = val;
      /*请求数据*/
      this.getList();
    }
  },
  mounted() {
    //页面刷新就执行
    localStorage.eachNum = "";
    this.getList();
    resize(this);
  },
  activated() {
    localStorage.eachNum = "";
    this.getList();
    resize(this);
    this.$nextTick(() => {
      this.$refs.table.doLayout(); //解决表格错位
    });
  }
};
</script>

<style scoped lang="scss">
</style>
